<template>
  <div class="home">
    <BeforeHome></BeforeHome>
    <ChooseCard></ChooseCard>
    <nav-bar>
      <div slot="right" class="login">
        <button v-if="!isLogining" @click="l_rClick">登录/注册</button>
        <button v-if="isLogining" @click="toMine">{{name}}</button>
      </div>
    </nav-bar>
      <div class="content"
           ref="scroll">
        <!-- 地图跳转 -->
        <chage-map></chage-map>
      </div>
  </div>
</template>

<script>
  import NavBar from 'components/common/navbar/NavBar'

  import Scroll from '../../components/common/scroll/Scroll.vue'

  import ChageMap from './homechild/ChageMap.vue'

  import BeforeHome from './homechild/BeforeHome.vue'

  import ChooseCard from './homechild/chooseCard.vue'


  export default {
    name: "Home",

    components: {
        ChooseCard,
        NavBar,
        Scroll,
        ChageMap,
        BeforeHome,
    },
    data() {
      return {
        name:'雪饼',
        // 登录前的页面是否存在 
        exist: true,
       
      }
    },
    mounted() {
      if(this.name) this.name = JSON.parse(localStorage.user).userName
    },
    computed: {
      isLogining() {
        return localStorage.token ? true : false
      }
    },
    methods: {
      l_rClick() {
        this.$router.replace('/l_r')
      },
      toMine(){
        this.$router.replace('/profile')
      }
    },
  }
</script>

<style scoped>
/*  设置主页样式*/
 .home{
   background-color: var(--color-tint);
   height: 100vh;
   width: 100vw;
   position: relative;
 }

/* 设置登录div基本属性 */
 .login{
   font-size: 13px;
   position: relative;
 }

/* 设置按钮样式 */
 .login button{
   border: 5px solid white;
   border-top-left-radius: 22px;
   border-bottom-left-radius: 22px;
   border-right: none;

   width: 80px;
   height: 34px;
   background-color: var(--color-tint);
   color: white;
   text-align: center;
   font-weight: bolder;

   position: relative;
   bottom: 0;
 }
/* 给按钮添加点击效果 */
  .login button:active{
    color: gray;
    border: 5px solid gray;
    border-right: none;
    opacity: 0.5;
  }

/* 设置滚动部分样式 */
 .content{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    z-index: 999;
  }
</style>
